<template>
	<view class="knowledge">
		<u-navbar title-color="#000" :isBack="false" back-icon-color="#ffffff" :is-fixed="true" height="60" title="宠物小知识"
		 :back-text-style="{color: '#fff'}"></u-navbar>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" height="90%">
			<view class="know-body">
				<view class="know-item" v-for="(know,index) in knowList" @click="getKnowInfo(know.rticleaId)">
					<view class="item-content">
						<text class="item-title">{{know.rticleaTitle}} >></text>
						<view class="collection" @click.stop="changHander(know,index)">{{know.is_collection?'已收藏':'+ 收藏'}}</view>
						<view class="pic-icon">
							<u-avatar :size="80" :src="know.url"></u-avatar>
						</view>
						<view class="bg">
							<image :src="!know.rticleaImgList[0]?'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2712979514,2115333787&fm=26&gp=0.jpg':know.rticleaImgList[0]"></image>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<tab-bar :pagePath="'/pages/knowledge/knowledge'"></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				knowList: []
			};
		},
		methods: {
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(mescroll) {
				this.$api.getKnowList({
					page: mescroll.num,
					limit: mescroll.size,
					infoTitle: this.keyword
				}).then(res => {
					if (res.code) {
						if (mescroll.num == 1) {
							this.knowList = res.data
						} else {
							this.knowList = this.knowList.concat(res.data)
						}
						mescroll.endSuccess(res.data.length, res.data.length >= mescroll.size);
					}
				}).catch(() => {
					mescroll.endErr();
				})
			},
			changHander(know, index) {
				this.$api.addFollow({
					rticleaId: know.rticleaId
				}).then(res => {
					if (res.code) {
						this.$comm.successToShow(res.data.info, () => {
							this.knowList[index].is_collection = !this.knowList[index].is_collection
						})
					}
				})
			},
			getKnowInfo(rticleaId) {
				this.$comm.navigateTo('/pages/know-info/know-info?rticleaId=' + rticleaId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.know-body {
		margin: 40upx 20upx 0upx;

		.know-item {
			position: relative;
			overflow: hidden;
			border-radius: 25rpx;
			margin-top: 40rpx;
			position: relative;
			z-index: 10;

			.item-content {
				width: 710rpx;
				height: 300rpx;
			}

			.item-title {
				font-size: 26rpx;
				color: #FFFFFF;
				position: absolute;
				top: 220rpx;
				left: 20rpx;
			}

			.collection {
				width: 110rpx;
				height: 44rpx;
				text-align: center;
				background-color: $indexColor;
				color: #FFFFFF;
				border-radius: 10rpx;
				position: absolute;
				top: 20rpx;
				left: 570rpx;
			}

			.pic-icon {
				position: absolute;
				top: 180rpx;
				left: 580rpx;
			}

			.bg {
				position: relative;
				z-index: -1;
				width: 100%;
				height: 100%;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}
	}
</style>
